<template>
  <layout-basic-page>
    <cs-form
      v-model="formData"
      :items="items"
      component-full-width
      @change="onChange"
    />
  </layout-basic-page>
</template>
<script setup lang="ts">
  import { useElSwitch } from '/@/hooks/form-item'
  import { save, setting } from './hooks'
  import type { csDevelopmentSetting } from './types'
  import { ref } from 'vue'

  defineOptions({
    name: 'CsDevSetting'
  })
  const formData = ref<csDevelopmentSetting>(setting)
  const items = [useElSwitch('auth', '功能鉴权')]

  const onChange = (value: csDevelopmentSetting) => {
    save(value)
  }
</script>

<style lang="scss">
  .layout-error-page {
    display: flex;
    align-items: center;

    .layout-basic-page__main {
      flex: 1;
    }
    .el-empty__image {
      height: 200px;
    }

    .el-empty__description {
      p {
        font-size: 16px;
      }
    }
  }
</style>
